.dice-contain{
    display: flex;
    .dice-box{
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid black;
        display: flex;
    }
    .dot{
        width: 20px;
        height: 20px;
        background-color: black;
        border-radius:20px;
    }
   
}
.dice-contain01{
    .dice-box01{
        //justify-content: flex-start;//默认在开始位置
    }
    .dice-box02{
        justify-content: center;
    }
    .dice-box03{
        justify-content: flex-end;//在结束为止
    }
    .dice-box04{
        align-items: center;
    }
    .dice-box05{
       justify-content: center;
       align-items: center;
    }
    .dice-box06{
       justify-content: flex-end;
       align-items: center;
    }
    .dice-box07{
       align-items: flex-end;
    }
    .dice-box08{
       justify-content: center;
       align-items: flex-end;
    }
    .dice-box09{
       justify-content: flex-end;
       align-items: flex-end;
    }
}
.dice-contain02{
    .dice-box01{
        //justify-content: flex-start;//默认在开始位置
        justify-content: space-between;
    }
    .dice-box02{
        flex-direction: column;
        justify-content: space-between;
    }
    .dice-box03{
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        
    }
    .dice-box04{
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }
    
    
    .dice-box05{
        display: flex;
        flex-direction: column;
        .dot1{
            width: 100%;
            height: (1/3)*100%;
            display: flex;
        }
        .dot2{
            width: 100%;
            height: (1/3)*100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .dice-box06{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .dot1{
            width: 100%;
            height: (1/3)*100%;
            display: flex;
        }
        .dot2{
            width: 100%;
            height: (1/3)*100%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }
    }
}

.dice-contain03{
    .dice-box01{
        flex-direction: column;
        .dot1{
            display: flex;
            flex: 1;
        }
        .dot2{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }
        .dot3{
            display: flex;
            flex: 1;
            justify-content: flex-end;
            align-items: flex-end;
        }
    }
    .dice-box02{
        justify-content: space-between;
        .dot:nth-of-type(2){
            align-self: center;
        }
        .dot:nth-of-type(3){
            align-self: flex-end;
        } 
    }
}
.dice-contain04{
    .dice-box01{
        flex-direction: column;
        justify-content: space-between;
        .dot123{
            display: flex;
            justify-content: space-between;
        }
        .dot4{
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
    }
    
    .dice-box03{
        flex-direction: column;
        justify-content: space-between;
        .dot12{
            display: flex;
            justify-content: space-between;
        }
        .dot34{
            display: flex;
            justify-content: space-between;
        }
    }
}

.dice-contain05{
    .dice-box03{
        flex-direction: column;
        justify-content: space-between;
        .dot12{
            display: flex;
            justify-content: space-between;
        }
        .dot3{
            display: flex;
            justify-content: center;
        }
        .dot45{
            display: flex;
            justify-content: space-between;
        }
    }
}
.dice-contain06{
    .dice-box01{
        flex-direction: column;
        justify-content: space-between;
        .dot12,.dot34,.dot56{
            display: flex;
            justify-content: space-between;
        }
        // .dot34{
        //     display: flex;
        //     justify-content: space-between;
        // }
        // .dot56{
        //     display: flex;
        //     justify-content: space-between;
        // }
    }
}
